<!--
 * @Description: 虚拟列表
 * @Author: zhanyinjia
 * @Date: 2022-04-17 22:32:54
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2022-09-28 15:35:55
-->
<template>
  <div class="flex f-x-s">
    <div class="ml20 mr20">
      <h4>方案一：分片渲染（利用事件环机制实现）</h4>
      <CustomRender></CustomRender>
    </div>
    <div class="ml20 mr20">
      <h4>方案二：虚拟列表（监听滚动，始终只渲染几屏幕的dom即可）</h4>
      <h4>场景1:：每条数据高度固定</h4>
      <VirtualList
        :list="list"
        :size="40"
        v-slot="{ item }"
      >
        <Item :item="item"></Item>
      </VirtualList>
    </div>
    <div class="ml20 mr20">
      <h4>方案二：虚拟列表（监听滚动，始终只渲染几屏幕的dom即可）</h4>
      <h4>场景2：每条数据高度不固定，由内容自动撑开</h4>
      <p>待完善</p>
    </div>
    <h4></h4>
  </div>
</template>

<script>
import CustomRender from './components/customRender.vue'
import VirtualList from './components/VirtualList.vue'
import Item from './components/Item.vue'

let list = []
for (let i = 0; i < 500; i++) {
  list.push({ id: i, name: i })
}

export default {
  name: 'LongList',
  data() {
    return {
      list
    }
  },
  components: { CustomRender, VirtualList, Item }
}
</script>
